<template>
    <div class="productArea">
        <!-- 搜索栏 -->
        <Search></Search>
        <!-- 导航栏 -->
        <div class="navArea">
            <div>综合</div>
            <div>销量</div>
            <div>价格</div>
        </div>
        <!-- 产品展示区 -->
        <div class="goodsArea">
            <div class="everyRow clearFix" v-for="(item,index) in goods" :key="index" @click="goDetail(index)">
                <div class="everyLeft">
                    <img :src="item.goods_small_logo" alt="">
                </div>
                <div class="everyRight">
                    <p>{{item.goods_name}}</p>
                    <p class="goodsPrice">￥ {{item.goods_price}}</p>
                </div>
            </div>
        </div>
        <!-- {{$route.params.cid}} -->
        <div style="height:50px"></div>
    </div>
</template>
<script>
import Search from '@/components/Search'
export default {
    name:'product',
    data (){
        return{
            goods:[]
        }
    },
    components:{
        Search
    },
    mounted(){
        // console.log(this.$route.query)
        let cid=this.$route.query.cid
        let promise1=this.axios({
            url:'/goods/search',
            method:'GET',
            params:{
                cid:cid
            }
        })
        promise1.then((res)=>{
            // console.log(res)
            this.goods=res.data.message.goods
        })
    },
    methods:{
        goDetail(index){
            // console.log(index)
            // console.log(this.goods[index].goods_id )
            let goods_id=this.goods[index].goods_id
            this.$router.push({
                path:'/detail',
                query:{
                    goods_id:goods_id
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.productArea{
    .navArea{
        height: 35px;
        line-height: 35px;
        display: flex;
        justify-content: space-around;
    }
    // 
    .goodsArea{
        .everyRow{
            .everyLeft{
                width: 40%;
                float: left;
                img{
                    width: 100%;
                }
            }
            .everyRight{
                width: 60%;
                float: left;
                font-size: 12px;
                text-align: left;
                p{
                    padding: 5px;
                }
                .goodsPrice{
                    font-size: 14px;
                    color: brown;
                    padding: 5px;
                }
            }
        }
    }
}
</style>